import { DownOutlined } from '@ant-design/icons';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { useDebounceFn } from '@ant-design/pro-utils';
import { Button } from 'antd';

const TableList = () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'time',
      dataIndex: 'time',
      valueType: 'date',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      valueType: 'select',
      filters: true,
      onFilter: true,
      valueEnum: {
        london: {
          text: '伦敦',
        },
        'New York': {
          text: '纽约',
        },
      },
    },
    {
      title: 'Action',
      key: 'action',
      sorter: true,
      valueType: 'option',
      render: () => [
        <a key="delete">Delete</a>,
        <a key="link" className="ant-dropdown-link">
          More actions <DownOutlined />
        </a>,
      ],
    },
  ];

  const genData = (total) => {
    if (total < 1) {
      return [];
    }
    const data = [];
    for (let i = 1; i <= total; i += 1) {
      data.push({
        key: i,
        name: 'John Brown',
        age: i + 10,
        time: Date.now(),
        address: i % 2 === 0 ? 'london' : 'New York',
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
      });
    }
    return data;
  };

  const initData = {
    bordered: true,
    loading: false,
    columns,
    pagination: {
      show: true,
      pageSize: 5,
      current: 1,
      total: 100,
    },
    size: 'small',
    expandable: false,
    headerTitle: '高级表格',
    tooltip: '高级表格 tooltip',
    showHeader: true,
    footer: true,
    rowSelection: {},
    scroll: false,
    hasData: true,
    tableLayout: undefined,
    // toolBarRender: true,
    search: {
      show: true,
      span: 12,
      collapseRender: true,
      labelWidth: 80,
      filterType: 'query',
      layout: 'horizontal',
    },
    options: {
      show: true,
      density: true,
      fullScreen: true,
      setting: true,
    },
  };
  const ref = useRef();

  const [config, setConfig] = useState(initData);

  /** 去抖配置 */
  // const updateConfig = useDebounceFn(async (state) => {
  //   setConfig(state);
  // }, 20);

  const tableColumns = (config.columns || columns)?.map((item) => ({
    ...item,
    ellipsis: config.ellipsis,
  }));
  return (
    <PageContainer>
      <ProTable
        {...config}
        formRef={ref}
        pagination={
          config.pagination?.show
            ? config.pagination
            : {
                pageSize: 5,
              }
        }
        search={config.search?.show ? config.search : {}}
        expandable={
          config.expandable && {
            expandedRowRender: (record) => <p>{record.description}</p>,
          }
        }
        options={config.options?.show ? config.options : false}
        // toolBarRender={
        //   config?.toolBarRender ? () => [<Button type="primary">刷新</Button>] : false
        // }
        footer={config.footer ? () => 'Here is footer' : false}
        headerTitle={config.headerTitle}
        columns={tableColumns}
        dataSource={genData(config.pagination?.total || 10)}
        scroll={config.scroll}
      />
    </PageContainer>
  );
};

export default TableList;
